import useHots from "../hooks/useHots";

const Hots = () => {
    const { hots, type, setType } = useHots();
    return (
        <>
            <div className='btn-group' style={{ marginBottom: 20 }}>
                <button
                    onClick={() => setType("baidu")}
                    className={
                        type == "baidu" ? `btn btn-danger` : `btn btn-default`
                    }
                >
                    百度
                </button>
                <button
                    onClick={() => setType("weibo")}
                    className={
                        type == "weibo" ? `btn btn-danger` : `btn btn-default`
                    }
                >
                    微博
                </button>
                <button
                    onClick={() => setType("douyin")}
                    className={
                        type == "douyin" ? `btn btn-danger` : `btn btn-default`
                    }
                >
                    抖音
                </button>
            </div>
            <ul className='list-group'>
                {hots.map((item) => (
                    <li className='list-group-item' key={item.index}>
                        {item.title}
                        <span className='badge'>{item.hotValue}</span>
                    </li>
                ))}
            </ul>
        </>
    );
};

export default Hots;
